<template>
  <div class="app-container">
    <div class="app-container-main">
      <div class="main-card-header">
        职位管理
      </div>
      <div class="main-card-body" style="position:relative">

        <div class="table">
          <!-- 筛选 -->
          <div class="list-search">

            <div class="list-options">
              <a-select v-model:value="searchlist.audit_id" style="width:100%" @change="handleSearchChange">
                <a-select-option value=''>不限审核状态</a-select-option>
                <a-select-option value='1'>待审核</a-select-option>
                <a-select-option value='2'>已通过</a-select-option>
                <a-select-option value='3'>未通过</a-select-option>
              </a-select>
            </div>
            <div class="list-options">
              <a-select v-model:value="searchlist.job_display
              " style="width:100%" @change="handleSearchChange">
                <a-select-option value=''>不限招聘状态</a-select-option>
                <a-select-option value='1'>已暂停</a-select-option>
                <a-select-option value='2'>招聘中</a-select-option>
              </a-select>
            </div>
            <div class="list-options">
              <a-select v-model:value="searchlist.time" style="width:100%" @change="handleSearchChange">
                <a-select-option value='1'>按添加时间排序</a-select-option>
                <a-select-option value='2'>按刷新时间排序</a-select-option>
              </a-select>
            </div>
            <div class="select-inp">
              <div>
                <a-select v-model:value="searchlist.input_inner" @change="handleSearchChange" style="width:100px">
                  <a-select-option value='jobname'>职位名称</a-select-option>
                  <a-select-option value='company'>公司名称</a-select-option>
                  <a-select-option value='company_id'>公司ID</a-select-option>
                  <a-select-option value='Contact'>会员手机号</a-select-option>
                </a-select>
              </div>
              <a-input-search v-model:value="searchlist.search_value" placeholder="请输入搜索内容"
                style="width: 200px;height: 32px;border-left: 0px;" @search="onSearch" />
            </div>
          </div>

          <!-- 表格 -->
          <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
            :data-source="datas" :pagination=false>

            <template #jobmes="{ record }">
              <a href="">{{ record.jobname }}</a>
              <p>{{ record.company }}</p>
            </template>
            <template #phone="{ record }">
              <p> <span><user-outlined /></span> {{ record.contact }} <span><phone-outlined style="color: green;"
                    @click="showModal" /></span></p>
              <p> <span><profile-outlined /></span> {{ record.contact }} <span><phone-outlined style="color: green;"
                    @click="showModal" /></span></p>
            </template>
            <template #audit="{ record }">
              <a-tag v-if="(record.audit_id === 1)" color="orange">待审核</a-tag>
              <a-tag v-else-if="(record.audit_id === 2)" color="green">已通过</a-tag>
              <a-tag color="red" v-else-if="(record.audit_id === 3)">未通过</a-tag>
            </template>
            <template #time="{ record }">
              <p> <span><history-outlined /></span> 2021-05-12 17:30 </p>
              <p> <span><history-outlined /></span> 2022-12-7 0:10 </p>
            </template>
            <template #display="{ record }">
              <a-tag color="red" v-if="(record.job_display_id === 2)">停止</a-tag>
              <a-tag v-else-if="(record.job_display_id === 1)" color="green">招聘中</a-tag>
            </template>
            <template #tg="{ record }">
              <span style="color:#1890ff" @click="showModal2(record.img)">[海报]</span>
              <span style="color:#1890ff">[复制]</span>

            </template>
            <template #action="{ record }">
              <a-button type="primary">管理</a-button>
              <a-button type="primary" @click="editdata(record)">编辑</a-button>
              <a-button style="background:orange;color:white;border: 0;" @click="Audit(record)">审核</a-button>
              <a-button type="danger" @click="deldata(record)">删除</a-button>
            </template>
          </a-table>

          <!-- 分页器 -->

          <a-pagination v-model:current="current1" v-model:page-size="pageSize1" :total="total"
            :show-total="total => `共 ${total} 条`" @change="onChange"
            style="margin: 10px 0;position:absolute; right: 40px;" />

          <div style="margin-top: 20px">
            <!-- <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="start">
              Reload
            </a-button>
            <span style="margin-left: 8px">
              <template v-if="hasSelected">
                {{ `Selected ${selectedRowKeys.length} items` }}
              </template>
            </span> -->

            <a-button type="primary">刷新</a-button>
            <a-button type="primary">导出</a-button>
            <a-button style="background:orange;color:white;border: 0;" @click="Auditall()">审核</a-button>
            <a-button type="danger" @click="delAlldata()">删除</a-button>
          </div>
        </div>

        <!-- 电话弹框 -->
        <a-modal v-model:visible="visible" title="提示" @ok="handleOk">
          是否对发起呼叫？
        </a-modal>

        <!-- 海报弹框 -->
        <a-modal v-model:visible="visible2" title="海报详情" @ok="handleOk2">
          <img :src="imghb" alt="">
        </a-modal>


        <!-- 状态更改弹框 -->
        <a-modal v-model:visible="visible3" title="将所选职位设置为" @ok="handleOk3()">
          认证状态:
          <a-radio-group v-model:value="auditvalue" name="radioGroup">
            <a-radio value="1">待审核</a-radio>
            <a-radio value="2">已通过</a-radio>
            <a-radio value="3">未通过</a-radio>
          </a-radio-group>

        </a-modal>
        <!-- 状态更改弹框all -->
        <a-modal v-model:visible="visible4" title="将所选职位设置为" @ok="handleOk4()">
          认证状态:
          <a-radio-group v-model:value="auditvalue" name="radioGroup">
            <a-radio value="1">待审核</a-radio>
            <a-radio value="2">已通过</a-radio>
            <a-radio value="3">未通过</a-radio>
          </a-radio-group>

        </a-modal>









      </div>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, onMounted, reactive, ref, toRefs, createVNode } from 'vue';
import { getlist, upaudit, del } from '@/api/position_info';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal } from 'ant-design-vue';
import {
  UserOutlined,
  ProfileOutlined,
  PhoneOutlined,
  HistoryOutlined,

} from '@ant-design/icons-vue';

import { useRouter } from "vue-router"
export default {
  components: {
    UserOutlined,
    ProfileOutlined,
    PhoneOutlined,
    HistoryOutlined,
  },
  setup() {

    // 分页
    const current1 = ref(1);
    const pageSize1 = ref(3);
    const total = ref(0)
    const onChange = (pageNumber, page) => {
      console.log('Pagenumber: ', pageNumber, page);
      current1.value = pageNumber
      pageSize1.value = page
      getData()
    };

    // 筛选信息

    const searchlist = reactive({
      audit_id: '',
      job_display: '',
      time: '1',
      input_inner: '职位名称',
      search_value: ""
    });
    //筛选接口
    const handleSearchChange = () => {

    }
    //搜索框
    const onSearch = (searchValue) => {
      console.log('use value', searchValue);
      console.log('or use this.value', value.value);
    };

    const datas = ref([]);

    // 获取数据
    const getData = () => {
      let search = {
        "page": current1.value,
        "pagesize": pageSize1.value
      }
      console.log(search);
      // let msg = await axios.get("http://127.0.0.1:8000/api/pinfo")
      getlist(search).then(({ data }) => {
        datas.value = data.results
        console.log(datas.value, 123);
        total.value = data.count
      })
    }

    // 修改
    const router = useRouter()
    const editdata = (data) => {
      router.push({
        path: '/user/jobup',
        params: {
          id: '123',
          name: 'nick'
        }
      })
    }

    onMounted(() => {
      getData()
    })

    //电话model
    const visible = ref(false);
    const showModal = () => {
      visible.value = true;
    };

    const handleOk = (e) => {
      console.log(e);
      visible.value = false;
    };
    // 海报model
    const visible2 = ref(false);
    const imghb = ref('')
    const showModal2 = (img) => {
      visible2.value = true;
      imghb.value = img

    };
    const handleOk2 = (e) => {
      console.log(e);
      visible2.value = false;
    };

    // 修改审核状态model
    const visible3 = ref(false);
    const upauditData = ref({})
    const auditvalue = ref('')
    const Audit = (data) => {
      console.log(data, "修改审核状态");
      visible3.value = true;
      upauditData.value = data
    }
    const handleOk3 = (id = upauditData.value.id) => {

      let data = {
        "audit_id": auditvalue.value
      }
      console.log(id);
      upaudit(id, data).then((msg) => {
        getData()
      })
      visible3.value = false;

    };
    // 批量修改
    const visible4 = ref(false);
    const Auditall = (data) => {
      console.log(data, "修改审核状态");
      visible4.value = true;
    }
    const handleOk4 = () => {
      console.log(state.selectedRowKeys);
      state.selectedRowKeys.forEach(e => {
        let data = {
          "audit_id": auditvalue.value
        }
        upaudit(datas.value[e].id, data).then((msg) => {
          console.log(msg);
          visible4.value = false
          state.selectedRowKeys = []
          getData()
        })
      });
    }


    // 删除接口

    const Delitem = (id) => {
      del(id).then((msg) => {
        console.log(msg);
      })
    }

    // 删除model
    const deldata = (data) => {
      console.log(data);
      Modal.confirm({
        title: '提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: '此操作将永久删除选中的职位, 是否继续?',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          Delitem(data.id)
          getData()
        }
      });
    }
    // 批量删除
    const delAlldata = () => {
      Modal.confirm({
        title: '提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: '此操作将永久删除选中的职位, 是否继续?',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          state.selectedRowKeys.forEach(e => {
            Delitem(datas.value[e].id)
          })
          state.selectedRowKeys = []
          getData()

        },
      });
    }








    const columns = [
      {
        title: '职位名称',
        dataIndex: 'jobmes',
        key: 'jobmes',
        slots: { customRender: 'jobmes' },
      },
      {
        title: '会员/职位手机号',
        slots: { customRender: 'phone' },
        dataIndex: 'phone',
        key: 'phone',
      }, {
        title: ' 审核状态',
        dataIndex: 'audit',
        key: 'audit',
        slots: { customRender: 'audit' },

      }, {
        title: '创建/刷新时间',
        dataIndex: 'time',
        key: 'time',
        slots: { customRender: 'time' },
      }, {
        title: '职位状态',
        dataIndex: 'display',
        key: 'display',
        slots: { customRender: 'display' },
      },
      {
        title: '推广',
        dataIndex: 'tg',
        key: 'tg',
        slots: { customRender: 'tg' },
      },
      {
        title: '操作',
        key: 'action',
        slots: { customRender: 'action' },
        width: 400
      }
    ];

    const state = reactive({
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
    });
    // const hasSelected = computed(() => state.selectedRowKeys.length > 0);

    // const start = () => {
    //   state.loading = true;
    //   // ajax request after empty completing
    //   setTimeout(() => {
    //     state.loading = false;
    //     state.selectedRowKeys = [];
    //   }, 1000);
    // };
    const onSelectChange = (selectedRowKeys) => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      state.selectedRowKeys = selectedRowKeys;
    };

    return {
      datas,
      columns,
      // hasSelected,
      ...toRefs(state),



      // func
      // start,
      onSelectChange,
      visible,
      showModal,
      handleOk,
      visible2,
      showModal2,
      handleOk2,
      searchlist,
      handleSearchChange,
      onSearch,
      imghb,
      Audit,
      visible3,
      handleOk3,
      auditvalue,
      handleOk4,
      Auditall,
      visible4,
      deldata,
      delAlldata,
      current1,
      pageSize1,
      total,
      onChange,
      editdata,




    };
  }
}
</script>

<style>

</style>